<template>
	<view class="goods-contrast">
		<view class="item-li" v-for="(item,index) in list" :key="index" @tap="toDetails(item)">
			<p>{{item.sortDadName}}对比</p>
			<h2>
				<span>{{item.hostProductName}}/{{item.productName}}</span>
				<u-icon name="arrow-right" size="20" color="#666"></u-icon>
			</h2>
		</view>
		<view class="btn" @tap="addProductComparison">
			添加产品对比
		</view>
		<u-popup :show="selShow" :round="10" @close="close" closeable bgColor="#f2f2f2">
			<view class="sel-container-box">
				<view class="title">
					选择对比商品
				</view>
				<view class="popup-container">
					<u-search :showAction="true" actionText="搜索" :animation="true" placeholder="搜索你想对比的商品" bgColor="#fff"
						v-model="searchKey" @search="searchList" @custom="searchList"></u-search>
					<view class="tabs">
						<span v-for="(item,index) in tabsList" :key="index" :class="currentIndex==item.id?'active-tab':''"
							@tap="handleTab(item)">{{item.name}}</span>
					</view>
					<scroll-view class="goods-ul" scroll-y="true" lower-threshold="50" @scrolltolower="scrolltolower">
						<u-checkbox-group shape="circle" activeColor="#F64D48" :value="goodsChecked" placement="column"
							@change="checkboxChange">
							<view class="goods-item" v-for="(item,index) in popupGoodsList" :key="index">
								<u-checkbox :key="index" :name="item.id"></u-checkbox>
								<view class="shop-info">
									<view class="img-box">
										<image class="goods-img" :src="item.pic" mode="aspectFit"></image>
									</view>
									<view class="right">
										<h2>{{item.productName}}<span v-if="item.tag">{{item.tag}}</span></h2>
										<p v-if="item.skuName">{{item.skuName}}</p>
										<p class="u-line-3" v-if="item.introduce">{{item.introduce}}</p>
										<view class="add-cart">
											<view class="price">
												<b>￥</b>
												<span>{{item.price}}</span>
												<!-- <span class="ori-price">￥{{item.oriPrice}}</span> -->
											</view>
										</view>
									</view>
								</view>
							</view>
						</u-checkbox-group>
						<u-loadmore loadmoreText="正在全力加载更多..." dashed line fontSize="21rpx" nomore-text="没有更多啦!"
							:status="moreStatus" />
					</scroll-view>
					<view class="duihao">
						<u-icon name="checkmark-circle-fill" size="40" color="#8551EB" @tap="toDuibi()"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		contrastList,
		getCartList,
		getProductList,
		addContrast
	} from "@/api/api.js";
	export default {
		data() {
			return {
				shoppingCartData: {},
				goodsList: [{
						id: '123eqwe',
						type: '扫地机器人对比',
						goods1: '追觅X50增强版',
						goods2: '追觅X40增强版'
					},
					{
						id: '123eq2we',
						type: '扫地机器人对比',
						goods1: '追觅X50增强版',
						goods2: '追觅X40增强版'
					},
					{
						id: '123eqw3e',
						type: '扫地机器人对比',
						goods1: '追觅X50增强版',
						goods2: '追觅X40增强版'
					}
				],
				selShow: false,
				searchKey: '',
				tabsList: [{
						name: '购物车',
						id: 0
					},
					{
						name: '热门商品',
						id: 1
					},
					{
						name: '对比历史',
						id: 2
					}
				],
				currentIndex: 0,
				page: 1,
				moreStatus: 'nomore',
				popupGoodsList: [],
				goodsChecked: [],
				list: [],
			}
		},
		onLoad() {
			// 获取缓存数据 shoppingCartData 购车数据
			this.shoppingCartData = uni.getStorageSync('shoppingCartData');
			this.contrastListTwo(); //对比记录
		},
		methods: {

			// 对比记录
			contrastList(productName) {
				contrastList({
					appUserId: uni.getStorageSync('userInfo').id,
					pageNum: this.page,
					pageSize: 10,
					productName
				}).then(res => {
					if (res.rows.length > 0) {
						this.popupGoodsList = [...this.popupGoodsList, ...res.rows];
						this.total = res.total;
					}
				}).finally(() => {
					this.moreStatus = 'nomore'
					uni.hideLoading()
				})
			},

			// 对比记录
			contrastListTwo() {
				contrastList({
					appUserId: uni.getStorageSync('userInfo').id,
					pageNum: this.page,
					pageSize: 5,
				}).then(res => {
					if (res.rows.length > 0) {
						this.list = res.rows;
					}
				}).finally(() => {
					this.moreStatus = 'nomore'
					uni.hideLoading()
				})
			},

			// 获取商品列表
			getProductList(productName) {
				getProductList({
					sceneType: 1,
					pageNum: this.page,
					pageSize: 10,
					productName
				}).then(res => {
					console.log(res);
					if (res.rows.length > 0) {
						this.popupGoodsList = [...this.popupGoodsList, ...res.rows];
						this.total = res.total;
					}
				}).finally(() => {
					this.moreStatus = 'nomore'
					uni.hideLoading()
				})
			},

			addProductComparison() {
				this.selShow = true;
				this.getList(); // 购物车
			},

			// 购物车
			getList(productName) {
				const data = {
					pageNum: this.page,
					pageSize: 1000,
					appUserId: uni.getStorageSync('userInfo').id,
					productName
				}
				getCartList({
					params: data
				}).then(res => {
					if (res.code == 200) {
						if (res.rows.length > 0) {
							this.popupGoodsList = [...this.popupGoodsList, ...res.rows];
							this.total = res.total;
						}
					}
				}).finally(() => {
					this.moreStatus = 'nomore'
					uni.hideLoading()
				})
			},

			close() {
				this.selShow = false
			},
			checkboxChange(e) {
				console.log('change', e);
				this.goodsChecked = e
			},
			scrolltolower() {
				this.page++
				this.moreStatus = 'loadmore'
				if (this.currentIndex === 0) {
					this.getList();
				}
				if (this.currentIndex === 1) {
					this.getProductList();
				}
				if (this.currentIndex === 2) {
					this.contrastList();
				}
			},
			handleTab(item) {
				this.page = 1;
				this.popupGoodsList = [];
				this.currentIndex = item.id
				if (this.currentIndex === 0) {
					this.getList();
				}
				if (this.currentIndex === 1) {
					this.getProductList();
				}
				if (this.currentIndex === 2) {
					this.contrastList();
				}
			},
			searchList() {
				if (this.searchKey.trim() == '') {
					return
				}
				this.page = 1;
				this.popupGoodsList = [];
				if (this.currentIndex === 0) {
					this.getList(this.searchKey);
				}
				if (this.currentIndex === 1) {
					this.getProductList(this.searchKey);
				}
				if (this.currentIndex === 2) {
					this.contrastList(this.searchKey);
				}
			},

			// 对比详情
			toDetails(item) {
				uni.navigateTo({
					url: '/package/pages/parameter/parameter?id=' + item.id
				})
			},

			toDuibi() {
				// 获取选中的商品 只能选中一个
				if (this.goodsChecked.length === 0) {
					// 提示选择商品
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return
				}
				if (this.goodsChecked.length > 1) {
					uni.showToast({
						title: '只能选择一个商品',
						icon: 'none'
					})
					return
				}

				const goods = this.popupGoodsList.find(res => res.id === this.goodsChecked[0]);

				let productId = "";
				let sortId = "";
				if (this.currentIndex === 0) {
					productId = goods.productId
					sortId = goods.sortDadId
				}
				if (this.currentIndex === 1) {
					productId = goods.id;
					sortId = goods.sortDadId
				}
				if (this.currentIndex === 2) {
					productId = goods.productId
					sortId = goods.sortDadId
				}

				if (sortId === this.shoppingCartData.sortDadId) {
					// 保存比对 并跳转
					addContrast({
						appUserId: uni.getStorageSync('userInfo').id,
						contrastProductId: productId,
						productId: this.shoppingCartData.productId,
						productName: this.shoppingCartData.productName + "/" + goods.productName,
						sortDadId: sortId,
						sortName: goods.sortName
					}).then(res => {
						console.log(res)
						// 缓存 contrastProduct
						uni.setStorageSync('contrastProduct', {
							contrastProductId: productId,
							productId: this.shoppingCartData.productId,
							sortDadId: sortId,
						})
						uni.navigateTo({
							url: '/package/pages/parameter/parameter'
						})
					})
				} else {
					uni.showToast({
						title: '请选择相同分类商品',
						icon: 'none'
					})
					return
				}
			}
		}
	}
</script>

<style lang="scss">
	.goods-contrast {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx 33rpx;
		box-sizing: border-box;

		.item-li {
			margin-bottom: 20rpx;
			padding: 40rpx 43rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 27rpx;

			p {
				font-size: 21rpx;
				color: #000000;
				font-family: 'hm-os-med';
				margin-bottom: 18rpx;
			}

			h2 {
				font-size: 35rpx;
				color: #000000;
				font-family: 'biaoti';
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.btn {
			background: #8551EB;
			border-radius: 27rpx;
			height: 109rpx;
			text-align: center;
			line-height: 109rpx;
			color: #fff;
			font-size: 35rpx;
		}
	}

	.sel-container-box {
		.title {
			height: 126rpx;
			width: 100%;
			font-size: 35rpx;
			color: #000000;
			font-family: 'biaoti';
			line-height: 96rpx;
			text-align: center;
		}

		.duihao {
			position: absolute;
			right: 30rpx;
			bottom: 20rpx;
		}

		.popup-container {
			padding: 0 33rpx;
			box-sizing: border-box;
			position: relative;



			.tabs {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 40rpx 0;

				span {
					width: 146rpx;
					text-align: center;
					font-size: 28rpx;
					color: #999;
				}
			}

			.active-tab {
				color: #8551EB !important;
				font-family: 'biaoti' !important;
			}

			.goods-ul {
				height: 900rpx;

				.goods-item {
					display: flex;
					align-items: center;
					background-color: #fff;
					margin-bottom: 20rpx;
					padding: 28rpx 20rpx;
					box-sizing: border-box;
					border-radius: 27rpx;

					.shop-info {
						display: flex;
					}

					.img-box {
						width: 175rpx;
						height: 175rpx;
						margin-right: 20rpx;
						background-color: #f7f7f7;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 17rpx;

						.goods-img {
							max-width: 80%;
						}
					}

					.right {
						h2 {
							font-size: 28rpx;
							color: #000000;
							font-family: 'biaoti';
							display: flex;
							align-items: center;

							span {
								margin-left: 8rpx;
								padding: 4rpx 8rpx;
								box-sizing: border-box;
								color: #fff;
								font-size: 20rpx;
								font-family: 'hm-os-text';
								background-color: #8551EB;
								border-radius: 8rpx;
							}
						}

						p {
							font-size: 21rpx;
							color: #000000;
							font-family: 'hm-os-med';
							margin: 16rpx 0 51rpx;
						}

						.add-cart {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								display: flex;
								align-items: center;

								b {
									font-size: 22rpx;
									color: #F21331;
									font-family: 'hm-os-label';
								}

								span {
									font-size: 40rpx;
									color: #F21331;
									font-family: 'biaoti';
									transform: translateY(-5rpx);
								}

								.ori-price {
									text-decoration: line-through;
									font-size: 24rpx;
									color: #666;
									font-family: 'hm-os-text';
									margin-left: 8rpx;
								}
							}

							image {
								width: 44rpx;
								height: 44rpx;
							}
						}
					}
				}
			}
		}
	}
</style>